<template>
    <div class="apply_list">
        <div class="apply_box" style="width: 100%;height: 100%;">

            <div class="title">设计大赛报名名单</div>
               <div class="apply" >
                <table v-for="(item,index) of  this.apply" :key="item._id">
                    <thead>
                    <tr>
                        <td colspan="2" class="list">队伍{{index+1}}</td>
                        <td colspan="6" ></td>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>作品类型</td>
                            <td>{{item.formData.type}}</td>
                            <td>团队名称</td>
                            <td colspan="2">{{item.formData.dName}}</td>
                            <td>作品名称</td>
                            <td colspan="2">{{item.formData.zName}}</td>
                        </tr>
                        <tr>
                            <td colspan="8" style="font-weight: 700;">团队成员</td>
                        </tr>
                        <tr v-for="(item2,index) of item.members" :key="index">
                            <td>姓名</td>
                            <td>{{item2.name}}</td>
                            <td>学号</td>
                            <td>{{item2.sno}}</td>
                            <td>班级</td>
                            <td>{{item2.class}}</td>
                            <td>专业</td>
                            <td>{{item2.major}}</td>
                        </tr>
                        <tr>
                            <td colspan="2" style="height: 60px;font-weight: 700;">作品设计文档</td>
                            <td colspan="6">

                                <div style="width: 350px;margin: 0 auto"  class="el-upload-list__item is-success" tabindex="0"><!---->
                                    <a class="el-upload-list__item-name">
                                        <i class="el-icon-document"></i>
                                        {{item.document.name}}&nbsp;{{item.document.size}}
                                    </a>

                                    <label for="" class="pdf pdf_ll" @click="browse(item.document.fileId)">浏览</label>
                                    <label for="" class="pdf pdf_xz" @click="uploadPdf(item.document.fileId)">下载</label>
                                    <!----><!----></div>

                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>
    </div>
</template>

<script>
    import $ from 'jquery'
    export default {
        name: "apply_list",
        data(){
            return{
                size:'',
                application: this.$cloudbase.database().collection('application'),
                apply:''
            }
        },
        async created(){

            $('html,body').scrollTop(0)
            this.apply = await this.application.get()
            this.apply=this.apply.data
            console.log(this.apply)
        },
        methods:{
            uploadPdf(fileId){
                console.log(fileId)
                this.$cloudbase.downloadFile({
                    fileID:fileId
                })
            },
            browse(fileId){
                this.$cloudbase.getTempFileURL({
                    fileList:[fileId]
                }).then(res=>{
                    window.open(res.fileList[0].tempFileURL)
                })
            }
        }
    }
</script>

<style scoped>
@import "~@/assets/css/component/apply_list.css";
</style>